<template>
    <div>
        <Card>
            <p slot="title">
                <Icon type="search"></Icon>
                卡券管理
            </p>
            <div slot="extra">
                <a href="#" slot="extra" @click.prevent="getList">
                    <Icon type="loop"></Icon>
                    <span>刷新</span>
                </a>
            </div>
            <Row>
                <Table class="card-data-table" :stripe="true" :data="tableData1" :columns="tableColumns1"
                       stripe></Table>
                <div style="margin: 10px;overflow: hidden">
                    <div style="float: right;">
                        <Page :total="all_pages" :page-size="pageSize" :current="currentPage" @on-change="changePage"></Page>
                    </div>
                </div>
            </Row>
        </Card>
    </div>
</template>
<script>
    import axios from 'axios'

    export default {
        name: 'card-manager',
        data() {
            return {
                card_status: [],
                tableData1: [],
                all_pages: 0,
                currentPage: 1,
                pageSize: 15,
                tableColumns1: [
                    {
                        title: 'ID',
                        key: 'id'
                    }
                ]
            }
        },
        methods: {
            
            //进行表格数据的请求和分页切换
            getList(){
                axios({
                    url: "/?page="+this.currentPage,
                    method: "get"
                }).then((response) => {
                    console.log(response);
                    this.tableData1 = response.data.data;
                    this.all_pages = response.data.total;
                    this.currentPage = response.data.current_page;
                    this.pageSize = response.data.per_page;
                }).catch((err) => {
                    console.log(err);
                    this.$Message.error("数据查询失败");
                });
            },
            formatDate(date) {
                const y = date.getFullYear();
                let m = date.getMonth() + 1;
                m = m < 10 ? '0' + m : m;
                let d = date.getDate();
                d = d < 10 ? ('0' + d) : d;
                return y + '-' + m + '-' + d;
            },
            changePage() {
                console.log(arguments);
                this.currentPage = arguments[0];
                this.getList();

            }
        },
        mounted(){
            this.getList();
        }
    }
</script>